<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MUSIC</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="Music">
        <div class="Audio">
            <div class="title">音乐盒</div>
            <img src="img/2.gif" alt="" width="360" height="290" class="xxpic">
            <div class="Music_But">
                <div class="but">
                    <span class="prev"></span>
                    <span class="play"></span>
                    <span class="next"></span>
                </div>
            </div>
        </div>
        <div class="Txt">
            <div class="title1">涂的音乐收藏</div>
            <ul>
                <li class="active">
                    <a href="javascript:void(0)" dataSrc="MP3/1.mp3">Counting Stars</a>
                </li>
                <li>
                    <a href="javascript:void(0)" dataSrc="MP3/2.mp3">Faded</a>
                </li>
                <li>
                    <a href="javascript:void(0)" dataSrc="MP3/3.mp3">Walking In The Sun</a>
                </li>
                <li>
                    <a href="javascript:void(0)" dataSrc="MP3/4.mp3">ninelie</a>
                </li>
                <li>
                    <a href="javascript:void(0)" dataSrc="MP3/5.mp3">Wake</a>
                </li>
                <li>
                    <a href="javascript:void(0)" dataSrc="MP3/6.mp3">On My Own</a>
                </li>
                <li>
                    <a href="javascript:void(0)" dataSrc="MP3/7.mp3">Fire</a>
                </li>
                <li>
                    <a href="javascript:void(0)" dataSrc="MP3/8.mp3">Seven</a>
                </li>
                <li>
                    <a href="javascript:void(0)" dataSrc="MP3/9.mp3">Everything Sucks</a>
                </li>
                <li>
                    <a href="javascript:void(0)" dataSrc="MP3/10.mp3">Cheap Thrills</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- <audio src="MP3/1.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio> 调试-->
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        var MusicSrc = "MP3/1.mp3";
        var Audio = CreatMusic(MusicSrc);
        var kf = 1; //控制开关
        var _index = 0;
        // 创建音乐播放器
        function CreatMusic(MusicSrc) {
            var CreamMp3 = $("<audio src=" + MusicSrc + "></audio>").get(0);
            return CreamMp3;
        }
        $(".play").click(function() {
            if (kf == 1) {
                $(this).css("background-position", "-79px 0px");
                Audio.play();
                kf = 2;
            } else {
                $(this).css("background-position", "-103px 0px");
                Audio.pause();
                kf = 1;
            }
        });
        //点击播放下一首
        $(".next").click(function() {
            _index++;
            MusicPlay();
        });
        //上一首
        $(".prev").click(function() {
            _index--;
            MusicPlay();
        });
        //点击右边播放
        $(".Txt ul li").click(function() {
            _index = $(this).index();
            if (kf == 1) {
                MusicPlay();
                kf = 2;
            } else {
                Audio.pause();
                kf = 1;
            }

        });

        function MusicPlay() {
            $(".Txt ul li").eq(_index).addClass("active").siblings("li").removeClass("active");
            MusicSrc = $(".Txt ul li").eq(_index).find("a").attr("dataSrc"); //音乐地址
            Audio.src = MusicSrc;
            Audio.play();
        }
    </script>
</body>

</html>